<template>
	<div class="tradersListPage">
		<my-header name-page="Traders" :btn-active="true" />
		<div
			:class="
				index !== tradersList.length - 1
					? 'tradersListPage__block'
					: 'tradersListPage__block__last'
			"
			v-for="(trader, index) in tradersList"
			:key="index"
		>
			<traders-item
				:name="trader.name"
				:data="trader.data"
				:followers="trader.followers"
			/>
		</div>
	</div>
</template>

<script>
import TradersItem from '@/components/TradersItem.vue'
import MyHeader from '@/components/UI/MyHeader.vue'
export default {
	name: 'TradersListPage',
	components: { TradersItem, MyHeader },
	props: {},
	data() {
		return {
			tradersList: [
				{ name: 'Rabbit1', data: 'PNL 7 day: +15%', followers: '10k' },
				{ name: 'Rabbit2', data: 'PNL 7 day: +45%', followers: '100k' },
				{ name: 'Rabbit3', data: 'PNL 7 day: +20%', followers: '1k' },
				{ name: 'Rabbit4', data: 'PNL 7 day: +14%', followers: '16k' },
				{ name: 'Rabbit5', data: 'PNL 7 day: +45%', followers: '90k' },
				{ name: 'Rabbit6', data: 'PNL 7 day: +100%', followers: '12k' },
				{ name: 'Rabbit7', data: 'PNL 7 day: +9%', followers: '25k' },
				{ name: 'Rabbit2', data: 'PNL 7 day: +45%', followers: '100k' },
				{ name: 'Rabbit3', data: 'PNL 7 day: +20%', followers: '1k' },
				{ name: 'Rabbit4', data: 'PNL 7 day: +14%', followers: '16k' },
				{ name: 'Rabbit5', data: 'PNL 7 day: +45%', followers: '90k' },
				{ name: 'Rabbit6', data: 'PNL 7 day: +100%', followers: '12k' },
				{ name: 'Rabbit7', data: 'PNL 7 day: +9%', followers: '25k' },
			],
		}
	},
	methods: {},
}
</script>

<style scoped>
.tradersListPage {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.tradersListPage__block {
	margin: 3% 0;
	height: 80%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.tradersListPage__block__last {
	margin-bottom: 7%;
	height: 80%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
</style>
